<template>
  <Card>
    <Tabs type="card" v-model="status" @on-click='changeTab'>
      <TabPane label="正常" name='1'></TabPane>
      <TabPane label="冻结" name='2'> </TabPane>
      <TabPane label="驳回" name='-1'> </TabPane>
      <TabPane label="已取消" name='3'> </TabPane>
    </Tabs>
    <vxe-grid
          highlight-hover-row
          show-header-overflow
          show-overflow
          ref="xGrid"
          height="600"
          align="center"
          :columns="tableColumn"
          :data="tableData"
          :toolbar-config="tableToolbar"
          :edit-config="{
            trigger: 'manual',
            mode: 'row',
            showStatus: true,
            icon: 'fa fa-file-text-o',
          }"
        >
          <template #toolbar_buttons>
            <Button
              type="primary"
              style="margin-right: 10px"
              icon="md-refresh"
              @click="update()"
              >刷新
            </Button>
            <Button
              type="error"
              style="margin-right: 10px"
              @click="deleteList()"
              >批量冻结
            </Button>
            <!-- <Button
            type="primary"
            icon="ios-search"
            style="margin-right: 10px"
            @click="search()"
            >查询
          </Button> -->
            <!-- <Button
            type="primary"
            icon="ios-add"
            style="margin-right: 10px"
            @click="openAddForm()"
            >新增
          </Button> -->
          </template>
          <template #toolbar_tools>
            <vxe-form :data="formData">
            <vxe-form-item title="查找企业名称" field="name" :item-render="{}">
              <template #default="{data}">
                <vxe-input v-model="data.name" placeholder="请输入名称" @change="update()"></vxe-input>
              </template>
            </vxe-form-item>
            </vxe-form>
          </template>

          <template #operate="{ row }">
            <Button
              type="primary"
              style="margin-right: 10px"
              @click="viewDetial(row)"
              >详情
            </Button>
            <Button
            type="error"
            style="margin-right: 10px"
            @click="deleteRow(row)"
            >冻结
          </Button>
          </template>

          <template #logo="{row}">
             <img v-if="row.logoUrl" :src="row.logoUrl" style="width: 100px;">
              <span v-else>无</span>
          </template>

          <template #pager>
            <div style="text-align: center; padding: 10px">
              <Page
                :current="page.current"
                :total="page.total"
                :page-size="page.pageSize"
                show-elevator
                show-total
                show-sizer
                @on-change="update"
              />
            </div>
          </template>
        </vxe-grid>

        <vxe-modal
          v-model="showDetail"
          :title="modalTitle"
          width="800"
          min-width="600"
          min-height="300"
          :loading="submitLoading"
          resize
          destroy-on-close
        >
          <template #default>
            <vxe-form
              ref="addFF"
              :data="detailForm"
              :items="formItems"
              :rules="formRules"
              title-align="right"
              title-width="100"
              @submit="submitForm()"
            >
            </vxe-form>
          </template>
        </vxe-modal>
  </Card>
</template>

<script>
import axios from '@/libs/api.request'
import treeSelectTreeVue from '../../components/tree-select/tree-select-tree.vue'
// import tables from '../../components/tables/tables.vue'
export default {
  // components: { tables },

  data () {
    return {
      status: '1',
      showDetail: false,
      modalTitle: '查看企业信息详情',
      submitLoading: false,
      selectRow: null,
      detailForm: null,
      formData: {
        id: 'xxxxxxxxx',
        code: 'xxxxx',
        name: '',
        logoUrl: 'xxxxx',
        briefIntroduction: '这是公司简介',
        pictureUrls: ['xxx.jpg', 'xxx.png'],
        phone: 12312331123,
        introduction: 'xxxxxxxx',
        type: 1,
        address: '公司地址',
        longitude: 123.123123123123,
        latitude: 123.123123123123,
        parkId: 'xxxxxxxx',
        entryTime: '2020-01-01',
        status: 1,
        createTime: '2021-06-13T08:22:14.000+00:00',
        updateTime: '2021-06-13T08:22:14.000+00:00'
      },
      tableToolbar: {
        zoom: true,
        custom: true,
        slots: {
          buttons: 'toolbar_buttons',
          tools: 'toolbar_tools'
        }
      },
      tableColumn: [
        { type: 'checkbox', width: 40, fixed: 'left' },
        { field: 'name', title: '公司名称', width: 220 },
        {
          field: 'logoUrl',
          title: 'logo',
          slots: { default: 'logo' },
          width: 120
        },
        { field: 'phone', title: '电话号码', width: 120 },
        {
          field: 'status',
          title: '状态',
          editRender: {
            name: '$select',
            options: [
              { label: '驳回', value: -1 },
              { label: '待审查', value: 0 },
              { label: '正常', value: 1 },
              { label: '冻结', value: 2 },
              { label: '已取消', value: 3 }
            ]
          },
          width: 100
        },
        { field: 'entryTime', title: '入驻时间' },

        {
          title: '操作',
          width: 170,
          slots: { default: 'operate' },
          fixed: 'right'
        }
      ],
      page: {
        current: 1,
        total: 20,
        pageSize: 10
      },
      // 展示数据 & 从后端获取来的：
      tableData: [
        {
          id: 'xxxxxxxxx',
          code: 'xxxxx',
          name: 'XXX公司',
          logoUrl: 'xxxxx',
          briefIntroduction: '这是公司简介',
          pictureUrls: ['xxx.jpg', 'xxx.png'],
          phone: 12312331123,
          introduction: 'xxxxxxxx',
          type: 1,
          address: '公司地址',
          longitude: 123.123123123123,
          latitude: 123.123123123123,
          parkId: 'xxxxxxxx',
          entryTime: '2020-01-01',
          status: 1,
          createTime: '2021-06-13T08:22:14.000+00:00',
          updateTime: '2021-06-13T08:22:14.000+00:00'
        }
      ],

      formItems: [
        {
          title: '基本信息', span: 16, titleAlign: 'left', titleWidth: 200, titlePrefix: { icon: 'fafa-address-card-o' }
        },
        // {
        //   field: 'logUrl',
        //   title: 'logo:',
        //   span: 8,
        //   itemRender: {
        //     slots: { default: 'logo' }
        //   }
        // },
        {
          field: 'name',
          title: '公司名称',
          // titleAlign: 'left',
          // align: 'left',
          span: 12,
          itemRender: {
            name: '$input',
            align: 'left',
            disabled: true,
            props: { disable: false, editable: false }
          }
        },
        {
          field: 'code',
          title: '企业统一社会信用代码',
          span: 12,
          itemRender: {
            name: '$input',
            disabled: true,
            props: { disable: false, editable: false }
          }
        },
        // {
        //   field: 'phone',
        //   title: '电话号码',
        //   span: 2,
        //   itemRender: {
        //     name: '$input',
        //     disabled: true
        //   }
        // },

        {
          title: '详细信息',
          span: 24,
          titleAlign: 'left',
          titleWidth: 200,
          titlePrefix: { icon: 'fafa-address-card-o' }
        },
        {
          field: 'briefIntroduction',
          title: '公司简介',
          span: 12,
          itemRender: {
            name: '$textarea',
            props: { readonly: true }
          }
        },
        {
          field: 'address',
          title: '公司地址',
          span: 12,
          itemRender: {
            name: '$textarea',
            props: { readonly: true }
          }
        },

        {
          align: 'center',
          span: 24,
          titleAlign: 'left',
          itemRender: {
            name: '$buttons',
            children: [
              { props: { type: 'submit', content: '提交', status: 'primary' } }
              // { props: { type: 'reset', content: '重置' } }
            ]
          }
        }
      ],

      formRules: {
        // name: [
        //   { required: true, message: '请输入名称' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
        // ],
        // nickname: [
        //   { required: true, message: '请输入昵称' }
        // ],
        // sex: [
        //   { required: true, message: '请选择性别' }
        // ]
      }

    }
  },
  mounted () {
    this.update()
  },

  methods: { //
    changeTab (name) {
      this.update()
    },
    update () {
      // TODO: 分页接口写完之后，修改此处
      this.enterpriseQuery(this.status)
        .then((res) => {
          this.tableData = res.data.msg.records
        })
        .catch((err) => {
          console.log(err)
        })
        // TODO: 获取全部正常 企业接口， 分页接口写完后注释
      // this.getEnterpriseByName(this.formData.name)
      //   .then((res) => {
      //     // console.log(this.formData.name, res)
      //     res.data.msg.map((item) => {
      //       item.entryTime = new Date(item.entryTime).toLocaleDateString()
      //     })
      //     this.tableData = res.data.msg
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    },
    toLine (name) {
      return name.replace(/([A-Z])/g, '_$1').toLowerCase()
    },
    submitForm () {
      this.submitLoading = true
      this.$Message('submit')
    },
    enterpriseQuery (
      status = 1,
      code = null,
      type = 2,
      parkId = null
    ) {
      return new Promise((resolve, reject) => {
        // 通过传入参数进行 分页查询：
        axios
          .request({
            method: 'post',
            url: 'enterprise/query',
            data: {
              name: this.formData.name,
              status: status.toString(),
              pageSize: this.page.pageSize,
              pageNum: this.page.current,
              code: code,
              type: type,
              parkId: parkId
            }
          })
          .then((res) => {
            console.log('query', res)
            resolve(res)
          })
          .catch((err) => {
            console.log(err)
            reject(err)
          })
      })
    },
    getEnterpriseByName (enterpriseName) {
      return new Promise((resolve, reject) => {
        axios
          .request({
            method: 'get',
            url: 'enterprise/list/all',
            params: {
              enterpriseName: enterpriseName
            }
          })
          .then((res) => {
            resolve(res)
          })
          .catch((err) => {
            console.log(err)
            reject(err)
          })
      })
    },
    search () {
      this.spaceQuery()
    },

    deleteList (row) {
      // 获取选中的数据
      const selectedRecords = this.$refs.xGrid.getCheckboxRecords()
      console.log(selectedRecords)
    },
    viewDetial (row) {
      this.showDetail = true
      this.detailForm = row
    },
    deleteRow (row) {
      // console.log(row)
      this.$Modal.confirm({
        title: '操作确认',
        content: '您确定要删除"' + row.name + '"吗',
        onOk: () => {
          const spaceId = row.spaceId
          console.log(spaceId)
          axios
            .request({
              method: 'get',
              url: 'space/delete',
              params: {
                spaceId: spaceId
              }
              // data:{ post, 放到请求头里面
              // }
            })
            .then((res) => {
              console.log(res)
              this.update()
              this.$Message.success('删除成功')
            })
            .catch((err) => {
              console.log(err)
            })
          // this.tableData.splice(idx, 1) // 返回被删除的数组
        },
        onCancel: () => {}
      })
    },
    refreshTable () {}
  }
}
</script>
